<!--
 * @Description: 新增/修改其他问题信息弹框
 * @Author: Huang Junjie
 * @Date: 2021-05-20 16:16:16
 * @LastEditTime: 2021-08-05 17:36:02
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <base-dialog
      class="dialog_box dialog-body-fieldset"
      :visible.sync="dialog.visible"
      width="60%"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      :show-default-footer="dialog.type === 'view' ? false : true"
      @updateData="addEditOtherProblemData">
      <el-form
        ref="addEditOtherProblemeRulesForm"
        :model="params"
        label-width="80px">
        <!-- 基础信息 -->
        <fieldset>
          <legend class="headings">基础信息</legend>
          <el-row>
            <el-col :span="8">
              <el-form-item
                prop="happenDate"
                :rules="rules.happenDate"
                label="日期">
                <span v-if="dialog.type === 'view'">{{ dialog.editInfo.happenDate }}</span>
                <el-date-picker
                  v-else
                  v-model="params.happenDate"
                  size="medium"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :disabled="dialog.type === 'view' ? true : false" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="lineId"
                :rules="rules.lineId"
                label="线路">
                <span v-if="dialog.type === 'view'">{{ dialog.editInfo.lineName }}</span>
                <el-select
                  v-else
                  v-model="params.lineId"
                  class="item operation-select"
                  size="medium"
                  clearable
                  placeholder="请选择线路"
                  :disabled="dialog.type === 'view' ? true : false">
                  <el-option
                    v-for="(item, index) in lineArr"
                    :key="`b${index}`"
                    :label="item.lineName"
                    :value="item.lineId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="deptId"
                :rules="rules.deptId"
                label="部门">
                <span v-if="dialog.type === 'view'">{{ dialog.editInfo.deptName }}</span>
                <select-tree
                  v-else
                  v-model="params.deptId"
                  size="medium"
                  :options="deptTreeArr"
                  :props="{ label: 'label', value: 'id', parent: 'parentId', children: 'children' }"
                  :disabled="dialog.type === 'view' ? true : false" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="bizDailyOtherInfoTypeId"
                :rules="rules.bizDailyOtherInfoTypeId"
                label="类型">
                <span v-if="dialog.type === 'view'">{{ dialog.editInfo.typeName }}</span>
                <el-select
                  v-else
                  v-model="params.bizDailyOtherInfoTypeId"
                  class="item operation-select"
                  size="medium"
                  clearable
                  placeholder="请选择类型"
                  :disabled="dialog.type === 'view' ? true : false">
                  <el-option
                    v-for="(item, index) in dictRecordTypeArr"
                    :key="`c${index}`"
                    :label="item.typeName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理状态">
                <span v-if="dialog.type === 'view'">{{ dialog.editInfo.disposeStatusText }}</span>
                <el-select
                  v-else
                  v-model="params.disposeStatus"
                  class="item operation-select"
                  size="medium"
                  clearable
                  placeholder="请选择类型"
                  :disabled="dialog.type === 'view' ? true : false">
                  <el-option label="未处理" value="NO" />
                  <el-option label="已处理" value="YES" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理日期">
                <span v-if="dialog.type === 'view'">{{ dialog.editInfo.disposeDate }}</span>
                <el-date-picker
                  v-else
                  v-model="params.disposeDate"
                  size="medium"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择处理日期"
                  :disabled="dialog.type === 'view' ? true : false" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item
            prop="content"
            :rules="rules.content"
            label="内容">
            <span v-if="dialog.type === 'view'">{{ dialog.editInfo.content }}</span>
            <el-input
              v-else
              v-model="params.content"
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
              :maxlength="500"
              :disabled="dialog.type === 'view' ? true : false" />
          </el-form-item>
          <el-form-item
            prop="condition"
            :rules="rules.condition"
            label="处理情况">
            <span v-if="dialog.type === 'view'">{{ dialog.editInfo.condition }}</span>
            <el-input
              v-else
              v-model="params.condition"
              type="textarea"
              :rows="5"
              placeholder="请输入情况"
              :maxlength="500"
              :disabled="dialog.type === 'view' ? true : false" />
          </el-form-item>
          <el-form-item label="备注">
            <span v-if="dialog.type === 'view'">{{ dialog.editInfo.memo }}</span>
            <el-input
              v-else
              v-model="params.memo"
              type="textarea"
              :rows="5"
              placeholder="请输入备注"
              :maxlength="500"
              :disabled="dialog.type === 'view' ? true : false" />
          </el-form-item>
        </fieldset>
        <!-- 基础信息 -->

        <!-- 附件上传 -->
        <fieldset>
          <legend class="headings">附件</legend>
          <el-form-item label="附件上传">
            <upload-file
              ref="upload"
              :model="fileModal"
              @on-success="uploadSuccess" />
          </el-form-item>
        </fieldset>
        <!-- 附件上传 -->
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { addEditOtherProblemData } from '@/api/jcwsc/production-daily/catenary-safety-production'
import { getDeptAndSubDeptList } from '@/api/main'
import UploadFile from '@/views/cms/jcwsc/components/UploadFile'

export default {
  components: {
    UploadFile
  },
  props: {
    // 弹框配置
    dialog: {
      type: Object,
      default() {
        return {}
      }
    },

    // 线路数组
    lineArr: {
      type: Array,
      default() {
        return []
      }
    },

    // 类型数组
    dictRecordTypeArr: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 部门数数组
      deptTreeArr: [],

      // 图片上传
      fileModal: {
        title: '',
        visible: true,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false,
        uploadType: 'file'
      },

      // 请求参数
      params: {
        id: '',
        happenDate: '',
        lineId: '',
        bizDailyOtherInfoTypeId: '',
        deptId: '',
        disposeStatus: '',
        disposeDate: '',
        content: '',
        condition: '',
        memo: '',
        filesList: []
      },

      // 表单校验规则
      rules: {
        happenDate: { required: true, message: '请选择日期', trigger: 'change' },
        lineId: { required: true, message: '请选择线路', trigger: 'change' },
        bizDailyOtherInfoTypeId: { required: true, message: '请选择类型', trigger: 'change' },
        deptId: { required: true, message: '请选择部门', trigger: 'change' },
        content: { required: true, message: '请输入内容', trigger: 'blur' }
        // condition: { required: true, message: '请输入处理情况', trigger: 'blur' }
      }
    }
  },
  watch: {
    // 监听弹窗弹出
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.params = {
          id: '',
          mainId: this.dialog.editInfo.mainId,
          happenDate: this.dialog.editInfo.uploadDate,
          lineId: '',
          bizDailyOtherInfoTypeId: '',
          deptId: '',
          disposeStatus: '',
          disposeDate: '',
          content: '',
          condition: '',
          memo: '',
          filesList: []
        }
        this.$nextTick(() => {
          this.$refs.addEditOtherProblemeRulesForm.clearValidate()
        })
        this.fileModal.fileList = []
        this.fileModal.pathList = []
        if (this.dialog.type === 'view') {
          this.fileModal.isDetail = true
        } else {
          this.fileModal.isDetail = false
        }
        if (this.dialog.type === 'view' || this.dialog.type === 'edit') {
          this.params = {
            id: this.dialog.editInfo.id,
            mainId: this.dialog.editInfo.mainId,
            happenDate: this.dialog.editInfo.happenDate,
            lineId: this.dialog.editInfo.lineId,
            bizDailyOtherInfoTypeId: this.dialog.editInfo.bizDailyOtherInfoTypeId,
            deptId: this.dialog.editInfo.deptId,
            disposeStatus: this.dialog.editInfo.disposeStatus,
            disposeDate: this.dialog.editInfo.disposeDate,
            content: this.dialog.editInfo.content,
            condition: this.dialog.editInfo.condition,
            memo: this.dialog.editInfo.memo,
            filesList: []
          }

          // 组装params.filesList
          this.dialog.editInfo.filesList.forEach(val => {
            const data = {
              name: val.fileName,
              fielSize: val.fileSize,
              fileExtname: val.fileExtname,
              fileName: val.fileName,
              filePath: val.filePath,
              fileType: val.fileType,
              memo: val.memo
            }
            this.params.filesList.push(data)
            this.fileModal.fileList.push(data)
            this.fileModal.pathList.push(data.filePath)
          })
        }
        // 查询
        this.getList()
      }
    }
  },
  methods: {
    // 获取下拉数据、字典
    getList() {
    // 获取部门树
      getDeptAndSubDeptList({ deptCode: this.dialog.deptCode }).then(response => {
        this.deptTreeArr = response.data
      })
    },

    // 文件上传
    uploadSuccess(fileList, type, key, index, fileArr) {
      this.params.filesList = []
      fileArr.forEach(val => {
        const data = {
          name: val.fileName,
          fielSize: val.fielSize,
          fileExtname: val.fileExtname,
          fileName: val.fileName,
          filePath: val.filePath,
          fileType: val.fileType,
          memo: ''
        }
        this.params.filesList.push(data)
      })
      this.notifiySuccess('上传成功')
    },

    // 保存
    addEditOtherProblemData() {
      this.$refs.addEditOtherProblemeRulesForm.validate(valid => {
        if (valid) {
          addEditOtherProblemData(this.params).then(res => {
            this.$emit('updateData', res.data)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.headings {
  color: #027DB4;
  padding: 10px 0;
}
</style>
